<!DOCTYPE html>
<html>
	<head>
		<title>Workhorse</title>
		<style type="text/css" media="screen">@import "css/jqtouch.min.css";</style> 
		<style type="text/css" media="screen">@import "css/theme.min.css";</style>
		<meta name="viewport" content="width=device-width, user-scalable=no" />
		<meta name="apple-mobile-web- app-capable" content="yes" />
		<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="js/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$.jQTouch({
				statusBar: 'black-translucent',
				preloadImages: [
					'themes/jqt/img/chevron_white.png',
					'themes/jqt/img/bg_row_select.gif',
					'themes/jqt/img/back_button_clicked.png',
					'themes/jqt/img/button_clicked.png'
				]
			});
		</script>
	</head>
	<body>
		<div id="tasks" class="current">
			<!-- Tasks home screen -->
			<div class="tabbar">
				<a href="#tasks">Tasks</a>
				<a class="inactive slideup" href="#projects">Projects</a>
			</div>
			<!-- Upcoming Tasks -->
			<ul id="maintasks" class="edit rounded tasklist"> 
				<form>
				<li><input type="text" name="quicktask" placeholder="Add New Task" id="quicktask" /></li>
				</form>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox1" title="Build PHP Backend" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox2" title="History Reading" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox3" title="CS 147 Reading more more more more" /><span class="due">Friday</span></li>
			</ul>
			<ul id="completedTasks" class="rounded tasklist completed">
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
				<li class="arrow"><input type="checkbox" class="taskbox" id="taskbox4" title="Build PHP Backend" checked="checked" /><span class="due">Tomorrow</span></li>
			</ul>
		</div>
		
		<!-- Projects Home Screen -->
		<div id="projects">
			<div class="tabbar">
				<a href="#tasks" class="inactive slideup">Tasks</a>
				<a href="#projects">Projects</a>
			</div>
		</div>
		<script type="text/javascript">
			$('.taskbox').click(toggleComplete);
			//$('footer').css('top',($(window).height() - 49) + "px");
			
			function toggleComplete()	{
				var id = $(this).attr('id').substring(7);
				var li = $(this).parent();
				$(li).remove();
				if(this.checked)	{
					$('#completedTasks').append(li);
				}	else	{
					$('#maintasks').append(li);
				}
				$(this).click(toggleComplete)
			}
		</script>
	</body>
</html>